<template>
    <div class="all">
      <div class="deaHea">
        <img src="../../assets/images/dealer/dealer-ph.jpg" alt="">
      </div>
      <div class="select">
        <p class="one" @click="change1()"><span>{{l1}}</span></p>
        <div class="sOne" v-show="msg1==true">
          <ul>
            <li v-for="(item,index) in list1" @click="chang1(index)">{{item}}</li>
          </ul>
        </div>
        <p class="two" @click="change2()"><span>{{l2}}</span></p>
        <div class="sTwo" v-show="msg2==true">
          <ul>
            <li v-for="(item,index) in list2" @click="chang2(index)">{{item}}</li>
          </ul>
        </div>
      </div>
      <p class="tips">共找到了<span> {{data1.length}} </span>条结果</p>
      <div class="data">
        <ul>
          <li v-for="(item,index) in data1">
            <p class="add">{{item.title}}</p>
            <p class="dis"><span>{{item.distance}}</span><i>+</i></p>
            <div class="both">
              <p>预约试驾</p>
              <p>立即购买</p>
            </div>
          </li>
        </ul>
      </div>
      <sFooter></sFooter>
    </div>
</template>

<script>
  import shareFoot from "../share/shareFoot";
    export default {
        name: "dealer",
      components:{
        'sFooter':shareFoot
      },
      data(){
          return{
            msg1:false,
            msg2:false,
            l1:'广东省',
            l2:'广州市',
            list1:['广西壮族自治区','广东省','河南省','河北省','湖南省','湖北省','浙江省','福建省','澳门特别行政区','香港特别行政区'],
            list2:['广州市','周口市','清远市','茂名市','湛江市','阳江市','江门市','佛山市','深圳市','东莞市'],
            data1:[]
          }
      },
      methods:{
          change1(){
            this.msg1=!this.msg1;
            this.msg2=false;
            this.$store.state.msg=false
        },
          change2(){
            this.msg2=!this.msg2;
            this.$store.state.msg=false
          },
          chang1(index){
            this.l1=this.list1[index];
            this.msg1=false;
            this.msg2=false
        },
          chang2(index){
          this.l2=this.list2[index];
          this.msg1=false;
          this.msg2=false
        }
      },
      mounted(){
          var _this = this;
          this.$http.get('./data/dealer.json').then(function (response) {
            _this.data1 = response.data.addressData;
          })
        .catch(function (error) {
          console.log(error)
        })
        .then(function () {
          //always executed
        })
      }
    }
</script>


<style scoped>
.deaHea{
  width: 100%;
}
.deaHea img{
  width: 100%;
  margin-top: 50px;
}
.all{
  background: black;
}
.select{
  width: 80%;
  margin: 30px auto 15px;
}
.select .one,.select .two{
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  font-size: 12px;
  color: grey;
  padding-left: 20px;
  text-align: left;
  margin: 20px auto;
}
.select .one span,.select .two span{
  margin-bottom: 5px;
}
.sOne,.sTwo{
  position: relative;
}
  .sOne ul,.sTwo ul{
    width: 100%;
    height: 130px;
    overflow: auto;
    top:-20px;
    left: 0;
    position: absolute;
    background: grey;
    z-index: 1;
  }
  .sOne li,.sTwo li{
    font-size: 12px;
    line-height: 25px;
    text-align: left;
    display: block;
    color: lightgray;
  }
  .tips{
    width: 80%;
    margin: 15px auto;
    text-align: left;
    font-size: 12px;
    color: lightgrey;
    position: relative;
  }
  .tips::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background:lightgrey;
    bottom: -10px;
  }
  .tips span{
    color: red;
  }
  .data{
    width: 80%;
    margin: 15px auto;
  }
  .data ul li{
    margin:  0;
    display: block;
    float: none;
  }
  .data ul li::after{
    content: "";
    position: absolute;
    background: dimgrey;
    width: 80%;
    height: 1px;
    left: 10%;
  }
.data ul li>.add{
  font-size: 14px;
  color: white;
  text-align: left;
  padding-top: 15px;
}
.data ul li>.dis{
  color: green;
  font-size: 13px;
  line-height: 30px;
  text-align: left;
}
.data ul li>.dis i{
  position: absolute;
  font-size: 15px;
  right: 10%;
  color: red;
}
  .both{
    width: 100%;
    margin-bottom: 15px;
  }
  .both p{
    font-size: 14px;
    width: 49%;
    height: 35px;
    line-height: 35px;
    background: #2c3e50;
    display: inline-block;
    color: white;
  }
</style>
